<%@page language="java" pageEncoding="UTF-8"%>
<%@include file="/views/common/include/taglib.jsp"%>
<link type="text/css" rel="stylesheet" href="${ctx }/css/dlifestyle/sectionparent.css" source="widget" />
<link type="text/css" rel="stylesheet" href="${ctx }/css/dlifestyle/admin.css" source="widget" />
<link type="text/css" rel="stylesheet" href="${ctx }/css/dlifestyle/new-add-goods.css" source="widget" />
<script src="${ctx}/js/controllers/mall/goodsInfo/GoodsInfoEditController.js" type="text/javascript"></script>
<section>

    <div style="height: 40px; line-height: 40px;">
        <div class="forword_area"></div>
        <div class="location">当前位置：${sessionScope.currcent_position}</div>
    </div>
    <hr>
    <div class="panel panel-default">
        <div class="editTitle">
            <div style="height: 41px; width: 190px; float: left;">
                <img style="float: left; margin-left: 37px; margin-top: 9.5px;" src="${ctx}/images/new_edit.png" />
                <c:if test="${type == 1 }">
                    <h4>新增商品信息</h4>
                </c:if>
                <c:if test="${type == 2 }">
                    <h4>编辑商品信息</h4>
                </c:if>
            </div>
            <div>
                <a style="float: right; margin-right: 20px; margin-top: -2px;" title="关闭" onclick="cancel();"><img src="${ctx}/images/new_close.png" /></a>
            </div>
        </div>
        <div class="checkTitle">
            <ul>
                <li style="cursor: pointer" class="tabhover" id="goodsInfo_li" onclick="gotoGoodsInfo(this)"><a href="#">商品信息</a></li>
                <li style="cursor: pointer" onclick="gotoGoodsDescrip(this)"><a href="#">商品简介</a></li>
                <li style="cursor: pointer" onclick="gotoGoodsSpec(this)"><a href="#">商品规格</a></li>
            </ul>
        </div>
        <div id="goodsInfo" class="form" style="min-height: 350px;">
            <div class="itemEditMap" style="height: 100px">
                <input id="goodsId" type="hidden" value="${goodsInfo.id }"> 
                <input id="imageLogo" type="hidden" value="${goodsInfo.logo }"> 
                <input id="type" type="hidden" value="${goodsType}">
                <span class="col-sm-1 editlableEditMap" style="height: 100px; line-height: 100px;">封面图片：</span>
                <div class="flEditMap" style="height: 100px;">

                    <c:if test="${goodsInfo.logo == null || goodsInfo.logo == ''}">
                        <img id="preview3" style="width: 70px; height: 70px; float: left; margin-top: 10px;" title="快上传封面图片吧" src="${ctx}/images/common/defaultgoods.jpg" />
                    </c:if>
                    <c:if test="${goodsInfo.logo != null && goodsInfo.logo != ''}">
                        <img id="preview3" style="width: 70px; height: 70px; float: left; margin-top: 10px;" src="${sessionScope.image_logo}${goodsInfo.logo}" />
                    </c:if>
                    <div class="mtjxsa" style="float: left; margin: 25px 20px;">
                        <p style="text-align: left; font-size: 12px;" id="imageBtn">
                            <input type="hidden" name="imageLogo" id="imageLogo" value="${goodsInfo.logo}" /> <label class="lbl" style="width: 400px; height: 15px;">提示：只能上传.jpg,
                                .png的图片格式,照片文件大小最大为10MB</label>

                        </p>
                        <div>
                            <div class="fl">
                                <button style="width: 100px; height: 25px; margin-top: 5px; background-color: #593505; color: #fff; border: 0px; line-height: 25px;" class="acblu tctpsc">上传封面图片</button>
                            </div>
                        </div>
                    </div>
                    <%@include file="/views/common/uploader/picture.jsp"%>
                </div>
            </div>
            <div class="itemEdit">
                <input id="goodsId" type="hidden" value="${goodsInfo.id }"> <span class="col-sm-1 editlableEdit">商品名称：</span>
                <div class="flEdit">
                    <input class="controlEdit" id="goodsName" onblur="checkGoodsName();" value="${goodsInfo.name }" type="text" style="width:80%" class="text" maxlength="100" placeholder="请输入名称（最多100字）" /> <em class="emStyle">*</em>
                </div>
            </div>
            <div class="itemEdit">
                <span class="col-sm-1 editlableEdit">商品分类：</span>
                <div class="flEdit">
                    <select id="firstCategory" style="height: 30px; line-height: 30px; width: 197px; margin-top: 4px; font-size: 12px;" onblur="checkFirstCategory();" >
                        <option value="">--一级分类--</option>
                        <c:forEach items="${firstCategory}" var="firstItem" varStatus="status">
                            <c:if test="${firstItem.id == goodsCategory.parentId}">
                                <option id="${firstItem.name}" value="${firstItem.id}" selected>${firstItem.name}</option>
                            </c:if>
                            <c:if test="${firstItem.id != goodsCategory.parentId}">
                                <option id="${firstItem.name}" value="${firstItem.id}">${firstItem.name}</option>
                            </c:if>
                        </c:forEach>
                    </select> 
                    <select id="secondCategory" style="height: 30px; line-height: 30px; width: 197px; font-size: 12px;" onblur="checkSecondCategory();" >
                        <option value="">--二级分类--</option>
                        <c:if test="${not empty secondCategory}">
                            <c:forEach items="${secondCategory}" var="secondItem" varStatus="status">
                                <c:if test="${secondItem.id == goodsInfo.goodsCategoryId}">
                                    <option id="${secondItem.name}" value="${secondItem.id}" selected>${secondItem.name}</option>
                                </c:if>
                                <c:if test="${secondItem.id != goodsInfo.goodsCategoryId}">
                                    <option id="${secondItem.name}" value="${secondItem.id}">${secondItem.name}</option>
                                </c:if>
                            </c:forEach>
                        </c:if>
                    </select><em class="emStyle">*</em>
                </div>
            </div>
            <div class="itemEdit" id="stock">
                <span class="col-sm-1 editlableEdit">库存量：</span>
                <div class="flEdit">
                    <input class="sortEdit" style="width:185px;" id="stockAmount" onblur="checkStockAmount();" onkeyup="checInputNumOnly(this)" value="${goodsInfo.stock }" type="number" class="text" maxlength="11" placeholder="请输入商品库存" /> <em
                        class="emStyle">*</em>
                </div>
            </div>
            <c:if test="${goodsType == 1}">
                <div class="itemEdit" id="price1">
                    <span class="col-sm-1 editlableEdit">商品价格：</span>
                    <div class="flEdit">
                        <input class="sortEdit" style="width:185px;" id="businessPrice" onblur="checkBusinessPrice();" onkeyup="checInputNum(this)" value="${goodsInfo.price }" type="number" class="text" maxlength="10" placeholder="请输入商品价格" /> 
                        <em class="emStyle">*</em>
                    </div>
                </div>
            </c:if>
            <c:if test="${goodsType == 2}">
                <div class="itemEdit" id="price2">
                    <span class="col-sm-1 editlableEdit">兑换积分：</span>
                    <div class="flEdit">
                        <input class="sortEdit" style="width:185px;" id="integralPrice" onblur="checkIntegralPrice();" onkeyup="checInputNumOnly(this)" value="${goodsInfo.integralNum }" type="number" class="text" maxlength="11"
                            placeholder="请输入商品兑换所需积分" /> <em class="emStyle">*</em>
                    </div>
                </div>
            </c:if>
            <c:if test="${goodsType == 3}">
                <div class="itemEdit" id="price3">
                    <span class="col-sm-1 editlableEdit">商品价格：</span>
                    <div class="flEdit">
                        <input class="sortEdit" style="width:185px;" id="secKillPrice" onblur="checkSecKillPrice();" onkeyup="checInputNum(this)" value="${goodsInfo.price }" type="number" class="text" maxlength="10" placeholder="请输入商品价格" /> <em
                            class="emStyle">*</em>
                    </div>
                </div>
            </c:if>
            <div class="itemEdit">
                <span class="col-sm-1 editlableEdit">市场价：</span>
                <div class="flEdit">
                    <input class="sortEdit" style="width:185px;" id="marketPrice" onblur="checkMarketPrice();" onkeyup="checInputNum(this)" type="number" maxlength="10" value="${goodsInfo.marketPrice}" placeholder="请输入商品市场价" />
                </div>
            </div>
            <div class="itemEdit">
                <span class="col-sm-1 editlableEdit">单位：</span>
                <div class="flEdit">
                    <input class="controlEdit" id="unit" onblur="checkUnit();" type="text" maxlength="20" value="${goodsInfo.unit}" placeholder="请输入商品单位">
                    <em class="emStyle">*</em>
                </div>
            </div>
            <div class="itemTextArea">
                <span class="col-sm-1 editlableTextArea">关键字：</span>
                <div>
                    <textarea class="controlTextArea" onpropertychange="if(value.length>100) value=value.substr(0,100)" id="keyword" rows="4" maxlength="100" placeholder="请输入商品搜索关键字，多个请用“，”分隔">
						${goodsInfo.keyword}
					</textarea>
                </div>
            </div>
            <div class="itemEdit">
                <span class="col-sm-1 editlableEdit">推荐等级：</span>
                <div class="flEdit">
                    <input class="sortEdit" id="recommendLevel" onblur="checkRecommendLevel();" type="number" maxlength="11" value="${goodsInfo.isRecommend == null ? 1 : goodsInfo.isRecommend}">
                </div>
            </div>
            <c:if test="${goodsType == 3}">
                <div class="itemEdit">
                    <span class="col-sm-1 editlableEdit">秒杀开始时间：</span>
                    <div class="flEdit">
                        <input id="startDate" class="controlEdit" style="width: 18%" type="text" maxlength="12" onClick="WdatePicker({minDate:'%y-%M-%d'})"
                            value="${goodsInfo.secKillStarttime.substring(0,10)}" placeholder="秒杀开始日期"> 
                        <input id="startTime" class="controlEdit" style="width: 18%" type="text" maxlength="12" onClick="WdatePicker({dateFmt:'H:mm:00',readOnly:true,minDate:'00:00:00',maxDate:'24:00:00'})" 
                        	value="${goodsInfo.secKillStarttime.substring(11,19)}" placeholder="秒杀开始时间">
					 	<em class="emStyle">*</em>
                    </div>
                </div>
                <div class="itemEdit">
                    <span class="col-sm-1 editlableEdit">秒杀结束时间：</span>
                    <div class="flEdit">
                        <input id="endDate" class="controlEdit" style="width: 18%" type="text" maxlength="12" onClick="WdatePicker({minDate:'%y-%M-%d'})" 
                        	value="${goodsInfo.secKillEndtime.substring(0,10)}" placeholder="秒杀结束日期"> 
                        <input id="endTime" class="controlEdit" style="width: 18%" type="text" maxlength="12" onClick="WdatePicker({dateFmt:'H:mm:00',readOnly:true,minDate:'00:00:00'})" 
                        	value="${goodsInfo.secKillEndtime.substring(11,19)}" placeholder="秒杀结束时间">
                        <em class="emStyle">*</em>
                    </div>
                </div>
            </c:if>
            <div class="itemEdit">
                <span class="col-sm-1 editlableEdit">排序：</span>
                <div class="flEdit">
                    <input class="sortEdit" id="sort" onblur="checkSort();" type="number" maxlength="50" value="${goodsInfo.sort == null ? 1 : goodsInfo.sort}"> <em class="emStyle">*</em>
                </div>
            </div>
            <div class="itemEdit" style="height: 200px;">
                <span class="col-sm-1 editlableEdit" style="height: 200px; line-height: 200px;">商品图片：</span>
                <div style="margin-top: 50px; float: left; margin-left: 20px; width: 77%;">
                    <input id="imgLength" type="hidden" value="${fn:length(imgs)}">
                    <div id="imgArea" style="float: left;">
                        <c:if test="${fn:length(imgs) > 0}">
                            <c:forEach items="${imgs}" var="item" varStatus="status">
                                <div id="delete${item.url}" style="float: left; position: relative;" onmouseover="showdelete(this);" onmouseout="hidedelete(this);">
                                    <input id="imgId${status.index+1}" type="hidden" value="${item.url}"> <img id="imgPic${item.url}" width="100px" height="100px;"
                                        style="border-radius: 14px; float: left; margin-right: 10px;" src="${sessionScope.image_logo}${item.url}"> <span class="deletegoods"
                                        onclick="deleteImg(this);" style="display: none;"><img style="position: absolute; top: 1px; right: 11px" title="删除图片" src="${ctx}/images/deletegoods.png" /></span>
                                </div>
                            </c:forEach>
                        </c:if>
                    </div>
                    <div class="uploadergoods" style="float: left;">
                        <div class="acblu banner">
                            <a><img style="width: 50px; height: 50px; float: left; padding: 15px 0px 0px 25px;" title="上传商品图片" src="${ctx}/images/uploader/uploader.png" /> </a> <br>
                            <div style="padding-top: 4px; width: 100px; float: left; text-align: center; color: #fff; font-size: 14px;">上传</div>
                        </div>
                    </div>
                </div>
                <div class="mtjxsa" style="float: left; margin-top: 40px;">
                    <p style="text-align: left" id="imageBtn">
                        <input type="hidden" name="imageLogoUrl" id="imageLogoUrl" value="${goodsInfo.logo}" />
                    </p>
                </div>
                <%@include file="/views/common/uploader/picture.jsp"%>
            </div>
            <div class="foot">
                <button class="buttonCancle" onclick="cancel();">取&nbsp;&nbsp;消</button>
                <button class="buttonEdit" onclick="gotoGoodsDescrip()">下一步</button>
            </div>
        </div>
        <div id="goodsDescrip" style="display: none;">
            <div style="height: auto; min-height: 261px;">
                <div id="ueditor">

                    <!-- 加载编辑器的容器 -->
                    <script id="container" type="text/plain">${goodsInfo.detail }</script>
                    <!-- 配置文件 -->
                    <script type="text/javascript" src="${ctx }/js/lib/ueditor/ueditor.config.js"></script>
                    <!-- 编辑器源码文件 -->
                    <script type="text/javascript" src="${ctx }/js/lib/ueditor/ueditor.all.js"></script>
                    <script type="text/javascript" src="${ctx }/js/lib/ueditor/ueditor.parse.js"></script>
                    <!-- 实例化编辑器 -->
                    <script type="text/javascript">
						var ue = UE.getEditor('container',{
							toolbars : [
								       	  ['fontfamily','fontsize', '|', 'blockquote', 'horizontal', '|', 'removeformat', '|', 'insertimage'],
								       	  ['bold', 'italic', 'underline', 'forecolor', 'backcolor', '|',
								       	   'justifyleft', 'justifycenter', 'justifyright', '|',
								       	   'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
								       	   'insertorderedlist', 'insertunorderedlist', '|',
								       	   'imagenone', 'imageleft', 'imageright', 'imagecenter','autotypeset','cleardoc','source'
								       	   ]
								       	],
							UEDITOR_HOME_URL: '${ctx}/js/lib/ueditor/',
							serverUrl: '${ctx}/fileHandler/upLoaderMergeForUeditor',
							imageUrlPrefix: '${sessionScope.image_logo}',
							imageActionName: 'uploadimage',
							imageFieldName: 'file',
							imageMaxSize: 1024000,
							imageAllowFiles: ['.png', '.jpg', '.jpeg', '.gif'],
							initialFrameHeight: 200,
							elementPathEnabled: false,
							retainOnlyLabelPasted:true,
							wordCount: false,
							/* sourceEditor: 'textarea', */
							insertorderedlist: {
								// 系统自带
								'decimal': '',     // '1,2,3...'
								'lower-alpha': '', // 'a,b,c...'
								'lower-roman': '', // 'i,ii,iii...'
								'upper-alpha': '', // 'A,B,C'
								'upper-roman': ''  // 'I,II,III...'
							},
							insertunorderedlist : {
								// 系统自带
								'circle': '',  // '○ 小圆圈'
								'disc': '',    // '● 小圆点'
								'square': ''   // '■ 小方块'
							},
							listDefaultPaddingLeft: '50'
						});
							</script>
                </div>
            </div>
            <div class="foot">
                <button class="buttonCancle" onclick="cancel();">取&nbsp;&nbsp;消</button>
                <button class="buttonEdit" onclick="gotoGoodsSpec();">下一步</button>
            </div>
        </div>

        <div id="goodsSpec" style="display: none;">
            <div style="background-color: #fff;">

                <!--新增自定义属性  -->
                <div style="border-left: 1px solid #CBD5DD; border-right: 1px solid #CBD5DD; background-color: #fff;">
                    <div class="attr-wrap">
                        <div class="text-box">商品规格</div>
                        <div class="newattr" style="">
                            <div>
                                <a href="javascript:void(0);" onclick="showDefineAttr();" class="btn_addPic"><img width="21px;" src="${ctx}/images/uploader/addFile.png" /> <span>新增自定义属性</span> </a> <a
                                    href="javascript:void(0);" onclick="appendRow();" class="btn_addPic"><img width="21px;" src="${ctx}/images/uploader/addFile.png" /> <span>新增规格</span> </a>
                            </div>
                            <div id="defineAttr">

                                <div class="defineAttr-wrap">
                                    <input class="inputClass" type="text" id="attr_name" class="text" maxlength="20" placeholder="请填写属性名称" />
                                    <button class="addorcancleAttr" onclick="appendCloumn();">新增</button>
                                    <button class="addorcancleAttr" onclick="hideDefineAttr();">取消</button>
                                </div>
                            </div>
                            <c:if test="${type == 1 }">
                                <div class="add-newattr">
                                    <table id="attr_spec" style="display: none">
                                        <tr>
                                            <c:if test="${goodsType == 2}">
                                                <td class="bg-td" width="150px">兑换积分</td>
                                            </c:if>
                                            <c:if test="${goodsType == 3}">
                                                <td class="bg-td" width="150px">秒杀价格</td>
                                            </c:if>
                                            <td class="bg-td" width="150px">库存</td>
                                            <td class="bg-td" width="150px">操作</td>
                                        </tr>
                                    </table>
                                </div>
                            </c:if>
                            <c:if test="${type == 2 }">
                                <div class="add-newattr">
                                    <table id="attr_spec">
                                        <tr>
                                            <c:forEach items="${attrNames}" var="attrName" varStatus="attrNameStatus">
                                                <td class="bg-td" width="250px">${attrName}<img id='close' src='images/guanbi.png' onclick='delete_cloum(this);'></td>
                                            </c:forEach>
                                            <c:if test="${goodsType == 2}">
                                                <td class="bg-td" width="150px">兑换积分</td>
                                            </c:if>
                                            <c:if test="${goodsType == 3}">
                                                <td class="bg-td" width="150px">秒杀价格</td>
                                            </c:if>
                                            <td class="bg-td" width="150px">库存</td>
                                            <td class="bg-td" width="150px">操作</td>
                                        </tr>
                                        <c:forEach items="${goodsSpecList}" var="specInfo" varStatus="specInfoStatus">
                                            <tr>
                                                <c:forEach items="${specInfo.goodsSpecificationAttrs}" var="attrInfo" varStatus="attrInfoStatus">
                                                    <td><input type="text" class="add-input" value="${attrInfo.attrValue}"></td>
                                                </c:forEach>
                                                <c:if test="${goodsType == 2}">
                                                    <td><input type="text" name="price" onkeyup="checInputNumOnly(this)" class="add-input" value="${specInfo.price}" /></td>
                                                </c:if>
                                                <c:if test="${goodsType == 3}">
                                                    <td><input type="text" name="price" onkeyup="checInputNum(this)" class="add-input" value="${specInfo.price}" /></td>
                                                </c:if>
                                                <td><input type="text" name="stock" onkeyup="checInputNumOnly(this)" class="add-input" value="${specInfo.stock}" /> <input type="hidden"
                                                    name="specId" value="${specInfo.id}" /></td>
                                                <td><input type="button" value="删除" onclick="deleteRow(this);" class="delete-btn" /></td>
                                            </tr>
                                        </c:forEach>
                                    </table>
                                </div>
                            </c:if>

                        </div>

                    </div>
                </div>
            </div>

            <div class="foot">
                <button class="buttonCancle" onclick="cancel();">取&nbsp;&nbsp;消</button>
                <button class="buttonEdit" onclick="saveGoodsInfo();">保&nbsp;&nbsp;存</button>
            </div>
        </div>
        <%@include file="/views/common/footer.jsp"%>
    </div>
</section>
<script type="text/javascript">
	var ctx = '${ctx}';
	setCtx(ctx);
</script>
<!-- 解决ie 6 7 8 9不能显示placeholder的问题 -->
<script src="${ctx}/js/lib/jquery.JPlaceholder.js"></script>
